<%--
  Created by IntelliJ IDEA.
  User: lixiaodong
  Date: 2018/5/10
  Time: 16:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style type="text/css">
    .test {background-color: rgba(255,255,255,0.85);}
    .visitor-login-div {
        text-align:center;
        padding: 20px 0;
    }
    .layui-layer-content{
        overflow: hidden;
    }
    .layui-layer-title {
        display: none;
    }
    .visitor-login-div h1 {
        font-size: 24px;
        font-family: "微软雅黑";
        margin: 10px;
    }
    .visitor-login-input {margin: auto;padding: 10px;width: 250px;}
    .visitor-login-input li {margin: 20px 0px}
    .visitor-login-input li input {
        width: 250px;
        height: 30px;
        font-size: 16px;
        border: 0;
        border-bottom: 1px solid black;
        padding-left:10px;
        background:transparent;
        outline:none;
    }
    .visitor-login-input li input:-webkit-autofill{
        -webkit-animation: autofill-fix 1s infinite;/* 链接动画方法 */
    }
    @-webkit-keyframes autofill-fix {/* 定义动画的方法 */
        from{
            background-color: transparent;
        }to {
            background-color: transparent;
                 }
    }
    .visitor-login-input li input::-webkit-input-placeholder{
        color: #3F3F3F;
    }
    .visitor-login-input li input:-moz-placeholder{
        color: #3F3F3F;
    }
    .visitor-login-input li input::-moz-placeholder{
        color: #3F3F3F;
    }
    .visitor-login-input li input:-ms-input-placeholder{
        color: #3F3F3F;
    }
    .visitor-login-input li a canvas {
        display: inline-block;
        width: 145px;
        height: 35px;
    }
    .visitor-login-input li button {
        width: 105px;
        height: 38px;
        margin: 0;
        border: none;
        border-radius: 8px;
        font-size: large;
        font-family: "微软雅黑";
        background-color: gainsboro;
    }
    #login_submit {
        margin-right: 16px;
    }
    #login_register {
        margin-left: 16px;
    }
</style>

<div class="visitor-login-div">
    <h1>用户登录</h1>
    <form id="login_form">
        <ul class="visitor-login-input">
            <li>
                <input type="text" placeholder=" 账号" required id="username" name="username">
            </li>
            <li>
                <input type="password" placeholder=" 密码" required id="password" name="password">
            </li>
            <li>
                <a href="javascript:;" id="verification_btn">
                    <!--<img id="verification_img" src="/visitor/verificationCode.action" alt="验证码">-->
                    <canvas id="verification_img"/>
                </a>
                <input type="text" placeholder=" 验证码" required id="verification" name="verification" style="width: 100px;">
            </li>
            <li>
                <button id="login_submit">登 录</button>
                <button id="login_register" type="button">注 册</button>
            </li>
            <li style="margin-bottom: 0px;">
                <a href="javascript:;">忘记密码</a>
            </li>
        </ul>


    </form>

</div>

<script type="text/javascript">
    var _visitor_login_js = {
        btn_load: function () {
            $('#verification_btn').on('click', function () {
                _visitor_login_js.changeUrl();
            });
            $('#login_register').on('click', function () {
                alert(69);
            });
            $('#login_form').on('submit', function () {
                var _data = $('#login_form').serialize();
                var _verification = $('#verification').val();
                if ('<%=session.getAttribute("code")%>' == _verification){
                    $.post('/visitor/login.action',_data,function (data) {
                        alert(data);
                    });
                }else {

                }
                return false;
            });
        },
        changeUrl: function () {
            var _url = '/visitor/verificationCode.action';
            var timestamp = (new Date()).valueOf();
            var index = _url.indexOf("?",_url);
            if (index > 0) {
                _url = _url.substring(0, _url.indexOf(_url, "?"));
            }
            if ((_url.indexOf("&") >= 0)) {
                _url = _url + "×tamp=" + timestamp;
            } else {
                _url = _url + "?timestamp=" + timestamp;
            }
            $('#verification_img').attr('src',_url);
        },
        init_verification: function () {
            $.get('/visitor/verificationCode.action',function (data) {
                //var _canvas = $('#verification_img');
                var _ctx=document.getElementById('verification_img').getContext('2d');
                for (var i = 0; i < 70; i++){

                }
                _ctx.font="120px Georgia";
                for (var i = 0; i < data.length; i++){
                    _ctx.fillStyle = '#'+Math.floor(Math.random()*256).toString(10);
                    _ctx.rotate(Math.floor(Math.random()*(10+10+1)-10)*Math.PI/180);
                    _ctx.fillText(data.substr(i,1),30+i*40,120,30);
                }

            });
        }
    }

    var visitor_login_app = (function () {
        $(function () {
            _visitor_login_js.btn_load();
            _visitor_login_js.init_verification();
        });
    })();
</script>